import { useMemo, useRef, useState } from "react"

export function useSalaryPannel() {
  const resolvedSalaryValue = useRef<[number, number]>()
  const [salaryValue, setSalaryValue] = useState<[number, number]>()
  const [openSalary, setOpenSalary] = useState(false)
  const salaryColumns = useMemo(
    () => [
      Array.from({length: 250}).map<IOption<number>>((_, i) => ({ value: i + 1, label: `${i + 1}k`})),
      Array.from({length: 250}).map<IOption<number>>((_, i) => ({ value: i + 1, label: `${i + 1}k`}))
    ],
    [],
  )
  function setSalary(value: [number, number]) {
    resolvedSalaryValue.current = value
    rollback()
  }
  function rollback() {
    if (resolvedSalaryValue.current) {
      setSalaryValue(resolvedSalaryValue.current)
    }
  }
  function apply(values: [number, number]) {
    setSalaryValue(values)
    resolvedSalaryValue.current = values ? [values[0], values[1]] : void 0
  }
  function openSalaryPannel() {
    setOpenSalary(true)
  }
  function closeSalaryPannel() {
    setOpenSalary(false)
    rollback()
  }
  function confirmSalary(values: [number, number]) {
    setOpenSalary(false)
    apply(values)
  }
  return {
    salaryValue,
    openSalary,
    salaryColumns,
    openSalaryPannel,
    closeSalaryPannel,
    confirmSalary,
    setSalary
  }
}
